<template>
  <div>
    <el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()"
      @submit.native.prevent>
      <!-- 搜索框-->
      <el-form-item prop="createDate">
        <el-date-picker v-model="searchForm.createDate" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()" size="small">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-for="(chartData,index) in chartList" :key="index">
        <ve-histogram :settings="chartData.settings" :data="chartData"></ve-histogram>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        searchForm: {
          createDate: [],
        },
        chartList: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(7, 'days'), end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(1, 'months'), end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(3, 'months'), end]);
            }
          }, {
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(6, 'months'), end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              picker.$emit('pick', [moment(end).subtract(12, 'months'), end]);
            }
          }]
        }
      }
    },
    activated() {
      var now = (new Date())
      this.searchForm.createDate = [moment(now).subtract(1, 'months'), now]
      this.query()
    },
    methods: {
      query() {
        this.$http({
          url: '/smis/tongji/jfKioskTongji/getPageTongji',
          method: 'get',
          params: {
            'startTime': moment(this.searchForm.createDate[0]).format("YYYY-MM-DD") + ' 00:00:00',
            'endTime': moment(this.searchForm.createDate[1]).format("YYYY-MM-DD") + ' 23:59:59'
          }
        }).then(({
          data
        }) => {
          if (data && data.success) {
            var time = data.time || []
            var count = data.count || []

            var chartTime = {}
            chartTime.settings = {
              legendHoverLink: true,
              metrics: ['访问时长'],
              yAxisName: ['小时'],
              // label: {
              //   formatter: '{b}: {@点击量}'
              // },
              itemStyle: {
                normal: {
                  color: '#409EFF',
                  label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    textStyle: { //数值样式
                      // color: 'black',
                      fontSize: 12
                    }
                  }
                }
              }
            }
            chartTime.columns = ['页面名', '访问时长']
            chartTime.rows = []
            time.forEach((item) => {
              chartTime.rows.push({
                '页面名': item.modularType,
                '访问时长': (item.totalTime / 3600.0).toFixed(2)
              })
            })

            var chartClick = {}
            chartClick.settings = {
              legendHoverLink: true,
              metrics: ['点击量'],
              yAxisName: ['次'],
              itemStyle: {
                normal: {
                  color: '#409EFF',
                  label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    textStyle: { //数值样式
                      // color: 'black',
                      fontSize: 12
                    }
                  }
                }
              }
            }
            chartClick.columns = ['页面名', '点击量']
            chartClick.rows = []
            count.forEach((item) => {
              chartClick.rows.push({
                '页面名': item.modularType,
                '点击量': item.count
              })
            })

            this.chartList = [chartTime, chartClick]
          }
        })
      }
    }
  }
</script>
